<template>
  <div class="detail">
    <van-nav-bar fixed placeholder left-arrow @click-left="goBack">
      <template #right>
        <van-icon
          @click="listenBook"
          class-prefix="my-icon"
          name="listen"
          size="18"
        />
      </template>
    </van-nav-bar>
    <div class="book-detail-warp">
      <div class="book-detail">
        <div class="cover-img">
          <img :src="detail.cover" />
        </div>
        <div class="desc-warp">
          <div class="title">{{ detail.title }}</div>
          <div class="author">{{ detail.author }}</div>
          <div class="desc">
            {{ detail.desc }}
          </div>
        </div>
      </div>
      <div class="book-tag">
        <div class="tag-item">科幻小说</div>
        <div class="tag-item">宇宙奥秘</div>
        <div class="tag-item">外星人文</div>
        <div class="tag-item">扎克伯格推荐</div>
      </div>
    </div>
    <!-- 出版社 版权信息 ISBN 语言 分类 -->
    <div class="other-info">
      <div class="reader">
        <p class="desc">阅读</p>
        <p class="omit">{{ detail.read }}</p>
      </div>
      <div class="category">
        <p class="desc">分类</p>
        <p class="omit">{{ detail.category }}</p>
      </div>
      <div class="language">
        <p class="desc">语言</p>
        <p class="omit">{{ detail.language }}</p>
      </div>
      <div class="ISBN">
        <p class="desc">ISBN</p>
        <p class="omit">ISBN</p>
      </div>
      <div class="publish">
        <p class="desc">出版</p>
        <p class="omit">{{ detail.publisher }}</p>
      </div>
    </div>
    <!-- 目录 -->
    <div class="catalog">
      <Title left="目录" :right="false"> </Title>
    </div>

    <!-- 书籍推荐 -->
    <div class="recommend-book">
      <Title left="推荐书籍" :right="false"></Title>
      <div class="book-body-warp">
        <div class="book-warp" v-for="item in recommend" :key="item.id">
          <div class="book">
            <div class="img">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <div class="change-btn">
        <button>换一批</button>
      </div>
    </div>
    <div class="footer-place"></div>
    <div class="footer-btn">
      <div class="read" @click="read">阅读</div>
      <button class="collect" :class="{ selected: inShelf }" @click="addShelf">
        {{ btnText }}
      </button>
    </div>
    <audio
      class="audio"
      :src="listenMp3"
      controls
      id="warningAudio"
      hidden="true"
    ></audio>
  </div>
</template>

<script>
import Title from "../../components/title.vue";
import { toRefs, ref, toRaw, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getBookDetail, getRecommendBooks } from "../../api/index";
import { Toast } from "vant";
export default {
  components: {
    Title,
  },
  name: "",
  setup() {
    const recommend = ref([]);
    const listenMp3 = ref("");
    const store = useStore();
    const getRecommendData = async () => {
      const { data: r } = await getRecommendBooks();
      recommend.value = r.results.slice(0, 4);
    };
    getRecommendData();
    const route = useRoute();
    const router = useRouter();
    const detail = ref();
    const getData = async () => {
      const { data: r } = await getBookDetail(route.params.id);
      detail.value = Object.assign(r, {
        author: r.author.split(",").slice(0, 1).join(),
      });
    };
    getData();
    const goBack = () => {
      router.go(-1)
    };
    const read = () => {
      router.push({
        name: "read",
        query: { url: JSON.stringify(detail.value.epub) },
      });
    };

    const inShelf = computed(() => {
      return store.getters.shelfList.find((item) => {
        console.log(item.id, "item.id");
        console.log(route.params.id, "route.params.id");
        return item.id == route.params.id;
      })
        ? true
        : false;
    });

    const btnText = computed(() => {
      return !inShelf.value ? "加入书架" : "👌已加入书架";
    });

    const url = "http://47.99.166.157:3000";
    // 听书
    const listenBook = () => {
      const text =
        "书名:" +
        detail.value.title +
        "," +
        "作者:" +
        detail.value.author +
        "," +
        detail.value.desc;
      fetch(`${url}/voice?text=${text}&lang=zh`)
        .then((r) => r.json())
        .then((json) => {
          listenMp3.value = json.path;
        })
        .then(() => {
          let warningAudioDom = document.getElementById("warningAudio");
          console.log(warningAudio);
          warningAudioDom.play();
        });
    };

    const addShelf = async () => {
      if (inShelf.value) {
        Toast.fail({
          message: "已加入书架\n请勿重复添加",
          forbidClick: true,
          duration: 1000,
        });
        return;
      }
      Toast.loading({
        message: "加入中...",
        forbidClick: true,
        duration: 10000,
      });
      await store.dispatch("shelf/addShelfList", toRaw(detail.value));
      Toast.success({
        message: "加入书架成功",
        forbidClick: true,
        duration: 1000,
      });
      console.log(inShelf.value, "inShelf.value");
    };
    return {
      ...toRefs(detail),
      detail,
      goBack,
      addShelf,
      recommend,
      read,
      listenMp3,
      btnText,
      inShelf,
      listenBook,
    };
  },
};
</script>
<style scoped lang="scss">
.detail {
  min-height: calc(100vh - 50px);
  .book-detail-warp {
    margin-bottom: 2px;
    padding: 10px;
    background-color: #fff;
    .book-detail {
      padding: 10px;
      display: flex;
      .cover-img {
        width: 40%;
      }
      .desc-warp {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 20px;
        .title {
          color: #333;
          font-weight: 700;
          font-size: 20px;
        }
        .author {
          font-size: 14px;
          color: blue;
        }
        .desc {
          font-size: 14px;
          color: gray;
          overflow: hidden;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
        }
      }
    }
    .book-tag {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      .tag-item {
        font-size: 12px;
        background-color: #f7f7f7;
        padding: 6px;
        border-radius: 10px;
      }
    }
  }
  .other-info {
    display: flex;
    overflow: auto;
    padding: 20px;
    padding-left: 0;
    background-color: #fff;
    justify-content: space-between;
    .desc {
      color: #333;
      font-weight: 700;
    }
    p {
      padding: 2px 0;
    }
    div {
      position: relative;
      display: flex;
      color: gray;
      font-size: 12px;

      flex-direction: column;
      align-items: center;
      min-width: 24%;
      font-size: 14px;
      padding-left: 6px;
      line-height: 1.6;
      &:first-child {
        padding-left: 0px;
      }
      .omit {
        text-align: center;
        width: 100%;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    }
  }

  .catalog {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
  }
  .recommend-book {
    padding: 10px;
    margin-top: 20px;
    background-color: #fff;
    .book-body-warp {
      display: flex;
      justify-content: space-around;
    }
    .book-warp {
      width: 24%;
      .book {
        width: 100%;
        padding: 10px;
        .img {
          height: 100px;
        }
        .title {
          font-size: 14px;
          font-weight: 700;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .change-btn {
      text-align: center;
      button {
        margin: 10px 0;
        border-radius: 10px;
        border: none;
        background-color: #f6f6f6;
        padding: 10px;
        width: 80%;
      }
    }
  }
  .footer-place {
    height: 60px;
  }
  .footer-btn {
    display: flex;
    height: 60px;
    background-color: #f7f8fa;
    margin-top: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 40px;
    padding: 10px 0;
    justify-content: space-around;
    .read {
      border-radius: 10px;
      width: 35%;
      background-color: var(--default);
      text-align: center;
      outline: none;
      border-right: 1px rgb(131, 128, 128) solid;
      border: none;
    }
    .collect {
      border-radius: 10px;
      width: 35%;
      background-color: #fff;
      text-align: center;
      border: 1px solid var(--default);
    }
    .selected {
      color: var(--gray);
      border: 1px solid #fff;
    }
  }
}
</style>
